<html xmlns:th="http://www.thymeleaf.org" lang="en" >
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" th:href="@{'/css/bootstrap.min.css'}">
    <link rel="stylesheet" th:href="@{'/css/buttonStyle.css'}">
    <title>Parcel Query</title>
  </head>
  
  <body style="background-color: #424564">

  <!-- 导航栏 -->

  <div class="container-fluid" style="
      background-color: rgb(245,245,245);">
      <div class="container">
          <nav class="navbar navbar-expand-lg">
              <div class="collapse navbar-collapse" id="navbarColor01">
                  <ul class="navbar-nav mr-auto">
                      <div class="container">
                          <li class="nav-item">
                              <button type="button" id="parcelQuery"
                                      class="btn btn-primary active" style="width: 150px; height:45px; font-size: large;">
                                  Search
                              </button>
                          </li>
                      </div>

                      <div class="container">
                          <li class="nav-item">
                              <button type="button" id="myParcel"
                                      class="btn btn-primary" style="width: 130px; height: 45px; font-size: large;">My Parcels</button>
                          </li>
                      </div>

                      <div class="container">
                          <li class="nav-item">
                              <button type="button" class="btn btn-primary" id="parcelPickUp"
                                      style="width: 150px; height: 45px; font-size: large;">Parcel Pickups</button>
                          </li>
                      </div>

                      <div class="container">
                          <li class="nav-item">
                              <button type="button" class="btn btn-primary" id='parcelPost'
                                      style="width: 150px; height: 45px; font-size: large;">Mailing parcels</button>
                          </li>
                      </div>
                  </ul>
                  <form class="form-inline my-2 my-lg-0" th:if="${session['userId'] != null}">
                      <div class="btn-group dropleft">
                          <button type="button" class="btn btn-info dropdown-toggle"
                                  style="width: 150px; height: 45px;" id="logout"
                                  data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                              Log Out
                          </button>
                      </div>
                  </form>
              </div>
          </nav>
      </div>
  </div>

    <!-- Logo栏 -->
  <div class="container">
      <img th:src="@{'/images/logo_white.png'}"
           style="width:70%; margin-left: 15%; margin-top: 20px; margin-bottom: 10px; margin-top: 50px;" class="img-responsive center-block">
  </div>
  
    <!-- 包裹查询页面 -->
    <div class="container" style="padding-bottom: 5%; ">
        <div class="row justify-content-center">
            <div class="col-lg-8  ">
                <div class="container bg-white" style="
                    border-style: solid; 
                    border-width: 5px; 
                    border-color: rgb(3, 14, 81);
                    padding-top: 30px;
                    padding-bottom: 30px;
                    margin-top: 50px;
                    border-radius: 15px;">
                    <h3 class="text-center">
                        Search for a parcel
                    </h3>
                    <div class="text-center" style="margin-bottom: 20px;">
                        Please enter tracking number
                    </div>
                    <!-- 输入框 -->
                    <div class="form-group">
                        <input class="form-control form-control-lg" type="text" placeholder="Ex. 12345567" id="trackingNumber"
                        style="margin-bottom: 20px;">
                    <div class="invalid-feedback">Please enter tracking number</div>
                    </div>

                    <div class="container d-flex justify-content-center">
                        <button type="button" class="btn btn-outline-info" style="text-align:center; width: 100px; font-size: 20; "
                        data-toggle="modal" data-target="#queryResult" id="okButton">OK</button>
                    </div>
                    <!-- 弹出的结果框 -->
                    <div class="modal fade" id="queryResult" tabindex="-1" role="dialog" aria-labelledby="queryResultLabel" 
                    aria-hidden="true">
                        <div class="modal-dialog modal-lg" role="document">
                          <div class="modal-content" >
                            <div class="modal-header">
                              <h3 class="modal-title">Search Result</h3>
                              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                              </button>
                            </div>
                            <div class="modal-body">
                              <div id="resultText"></div>
                            </div>
                            <div class="modal-footer">
                              <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
                            </div>
                          </div>
                        </div>
                      </div>
                </div>
            </div>
        </div>
    </div>
  

    <!-- 页脚 -->
    <footer class="container-fluid" style="background-color: rgb(51, 51, 51); padding-bottom: 50px; padding-top: 10px; ">
      <div class="container text-white text-center">
        <h4>XMUM STUDENT WORKS</h4>
      </div>
    </footer>
  
    <!-- Javascript -->
    <script th:src="@{'/js/jquery-3.5.1.min.js'}"></script>
    <script th:src="@{'/js/bootstrap.bundle.min.js'}"></script>
    <script th:inline="javascript">
      $().ready(function(){
        //Javascript

          jQuery.fn.shake = function (intShakes /*Amount of shakes*/, intDistance /*Shake distance*/, intDuration /*Time duration*/) {
              this.each(function () {
                  var jqNode = $(this);
                  jqNode.css({ position: 'relative' });
                  for (var x = 1; x <= intShakes; x++) {
                      jqNode.animate({ left: (intDistance * -1) }, (((intDuration / intShakes) / 4)))
                          .animate({ left: intDistance }, ((intDuration / intShakes) / 2))
                          .animate({ left: 0 }, (((intDuration / intShakes) / 4)));
                  }
              });
              return this;
          }
        // 输入框被唤醒
        $('#trackingNumber').blur(function(){
            if($('#trackingNumber').val() === "") {
                $('#trackingNumber').addClass('is-invalid')
                $('#okButton').removeClass('btn-outline-info')
                $('#okButton').addClass('btn-outline-danger')
            } else {
                $('#trackingNumber').removeClass('is-invalid')
                $('#okButton').removeClass('btn-outline-danger')
                $('#okButton').addClass('btn-outline-info')
            }
        });

        //判断输入的是否为空
        $('#okButton').click(function(event) {

            var result = $('#trackingNumber').val();
            if(result === "") {
                $('#trackingNumber').addClass('is-invalid')
                $('#okButton').removeClass('btn-outline-info')
                $('#okButton').addClass('btn-outline-danger')
                $('#trackingNumber').shake(10,10,100)
                $('#okButton').shake(10,10,100)
                return false;
            }
            $('#trackingNumber').val("") //清空
            $('#resultText').empty();
            $('#resultText').removeClass('alert');
            $('#resultText').removeClass('alert-danger');
            $.ajax({
                //请求方式
                type : "GET",
                //请求地址
                url : [[@{'/public/query?trackingNumber='}]] + result,
                //请求成功
                success : function(result) {
                    console.log(result)

                    var html = "<table class=\"table table-hover\">\n" +
                        "<thead>\n" +
                        "<tr>\n" +
                        "<th scope=\"col\">Time</th>\n" +
                        "<th scope=\"col\">Current State</th>\n" +
                        "<th scope=\"col\">Operator</th>"+
                        "</tr>\n" +
                        "</thead>\n" +
                        "<tbody>";
                    if (!result['empty'] && result['success']){
                        var details = result['message'];

                        details.forEach(function (detail) {

                            html += '<tr><td>' + detail['detailTime'] + '</td>\n';
                            html += '<td>' + detail['state'] + '</td>\n';
                            html += '<td>' + detail['operatorName'] + '</td></tr>\n'
                        })
                        html += "</tbody>\n" +
                            "</table>";
                        $('#resultText').append(html);
                    } else if(result['empty']) {
                        $('#resultText').addClass('alert');
                        $('#resultText').addClass('alert-danger');
                        $('#resultText').append("<strong>Error</strong>: No result has been found!");
                        that.event.preventDefault();
                        that.event.stopPropagation();
                    } else if(!result['success']) {
                        $('#resultText').text("Server Error!");
                    }

                },
                //请求失败，包含具体的错误信息
                error : function(e){
                    $('#resultText').text(e.status + ": Server Error!" );
                    console.log(e.status);
                    console.log(e.responseText);
                }
            });
        });
        //页面跳转
          $('#myParcel').click(function () {
              window.location.href = [[@{'/myParcel'}]];
          })
          $('#parcelQuery').click(function (){
              window.location.href = [[@{'/public/parcelQuery'}]];
          })
          $('#parcelPickUp').click(function(){
              window.location.href = [[@{'/parcelPickUp'}]];
          });
          $('#logout').click(function () {
              window.location.href = [[@{'/public/logout'}]]
          })
          $('#parcelPost').click(function () {
              window.location.href = [[@{'/comingSoon'}]];
          })
      })
    </script>
  </body>
  
</html>